<template>
  <div style="margin-bottom: 30px">
    <!-- SPU -->
    <el-card class="box-card" style="min-height: 80vh" v-loading="spuLoading">
      <div slot="header" class="clearfix">
        <!-- 头部左侧 -->
        <div class="media-display">
          <el-link :underline="false" style="font-size: 20px">添加产品</el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link :underline="false" style="font-size: 20px">SPU</el-link>
        </div>
      </div>
      <!-- 内容 -->
      <div class="text" style="width: 60vw">

        <el-form :model="spu" ref="spu" :rules="spuRules" label-width="100px" class="demo-spu" :disabled="disabled">
          <el-form-item label="商品 ID" prop="productId" style="margin-bottom: 20px">
            <el-input v-model.trim="spu.productId" placeHolder="请输入自定义商品id"></el-input>
            <span class="info">
              商品 ID，不能重复，不能有中文和空格
            </span>
          </el-form-item>
          <!-- 类别和品牌 -->
          <category-and-brand></category-and-brand>

          <el-form-item label="商品名称" prop="name">
            <el-input v-model.trim="spu.name" placeHolder="请输入商品名称" maxlength="50" show-word-limit></el-input>
            <span class="info">
              商品名称，可以使用英文或者中文
            </span>
          </el-form-item>

          <el-form-item label="商品标题" prop="title">
            <el-input v-model.trim="spu.title" placeHolder="请输入商品标题" maxlength="50" show-word-limit></el-input>
            <span class="info">
              该项会影响搜索结果
            </span>
          </el-form-item>
          <el-form-item label="商品描述" prop="describe">
            <el-input v-model.trim="spu.describe" placeHolder="请输入商品描述" maxlength="40" show-word-limit></el-input>
            <span class="info">
              一小段文字，介绍这款产品
            </span>
          </el-form-item>
          <el-form-item label="商品详情" prop="detail">
            <el-input type="textarea"
                      v-model.trim="spu.detail"
                      :autosize="{ minRows: 3, maxRows: 5}"
                      placeHolder="请输入商品详情"
                      maxlength="500"
                      show-word-limit>
            </el-input>
            <span class="info">
              商品详情，这款产品的详细信息
            </span>
          </el-form-item>

          <!-- upload -->
          <el-form-item label="商品主图">
            <upload :limit="1" :multiple="false" formDataName="mainImg" ref="mainImgUpload"></upload>
          </el-form-item>

          <el-form-item label="商品副图">
            <upload :limit="5" :multiple="true" formDataName="subImg" ref="subImgUpload"></upload>
          </el-form-item>

<!--          <el-form-item label="商品属性" prop="attributeList">
            <attribute-list></attribute-list>
          </el-form-item>-->
          <attribute-list ref="attributeList"></attribute-list>


          <el-form-item label="最低价格" prop="price">
            <el-input-number v-model="spu.price" :precision="2" :step="1" :min="1" :max="9999"></el-input-number>
          </el-form-item>

          <el-form-item label="商品状态" prop="state">
            <el-switch
              v-model="spu.state"
              :active-value="1"
              :inactive-value="0"
              active-text="正常"
              inactive-text="锁定">
            </el-switch>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="lockForm()">锁定信息</el-button>
            <el-button @click="resetForm" type="danger">重置</el-button>

            <el-button type="primary" @click="submitForm('spu')">测试上传</el-button>

          </el-form-item>
        </el-form>

        <el-button @click="unlockForm()" :disabled="!disabled" type="danger" size="small" plain>解锁spu，重新输入</el-button>

      </div>
    </el-card>
  </div>
</template>


<script>
  import { uploadProduct } from '@/api/product'

  import categoryAndBrand from '@/views/product/add/spu/categoryAndBrand'
  import upload from '@/views/product/add/spu/upload'
  import attributeList from '@/views/product/add/spu/attributeList'

  import { mapGetters } from 'vuex'
  import { spuRules } from '@/rules/product'

  export default {
    name: "spu",
    components: { categoryAndBrand, upload, attributeList },
    data() {
      return {
        spuLoading: false,
        spuRules,
      };
    },
    methods: {
      spuValidate(){
        let spu = this.validate()
        let mainImgUpload = this.$refs.mainImgUpload.validate()
        let subImgUpload = this.$refs.subImgUpload.validate()
        let attributeList = this.$refs.attributeList.validate()
        return spu && mainImgUpload && subImgUpload && attributeList;
      },

      unlockForm(){
        this.$store.commit('product/SET_DISABLED',false)
        this.$store.commit('product/init_sku_list')
      },
      lockForm() {
        console.log("vuex中的spu",this.spu)
        let spu = this.validate()
        let mainImgUpload = this.$refs.mainImgUpload.validate()
        let subImgUpload = this.$refs.subImgUpload.validate()
        let attributeList = this.$refs.attributeList.validate()
        console.log("spu =",spu,"attributeList =",mainImgUpload,"mainImgUpload =",attributeList,"subImgUpload =",subImgUpload)
        if (spu){
          if (mainImgUpload){
            if (subImgUpload){
              if (attributeList){
                this.$store.commit('product/CLEAR_ALL_INFO')// 清空vuex中的allInfo

                this.$refs.mainImgUpload.submitUpload()// 将主图信息加入vuex
                this.$refs.subImgUpload.submitUpload()// 将副图信息加入vuex
                let spu = {key: "spuJson",value: JSON.stringify(this.spu)}
                this.$store.commit('product/SET_ALL_INFO',spu)// 将spu信息加入vuex
                this.$store.commit('product/SET_DISABLED',true)// 锁定spu表单
                return true
              }else {
                this.$notify.warning({title: '错误',message: '属性信息有误，请检查！', duration: 1500});
              }
            }else {
              this.$notify.warning({title: '错误',message: '副图信息有误，请检查！', duration: 1500});
            }
          }else {
            this.$notify.warning({title: '错误',message: '主图信息有误，请检查！', duration: 1500});
          }
        }else {
          this.$notify.warning({title: '错误',message: '商品基本信息有误，请检查！', duration: 1500});
        }
        return spu && mainImgUpload && subImgUpload && attributeList;
      },
      validate(){
        let flag = true;
        this.$refs['spu'].validate((valid) => {
          flag =  valid;
        });
        return flag;
      },
      submitForm(){

        let spu = this.validate()
        let mainImgUpload = this.$refs.mainImgUpload.validate()
        let subImgUpload = this.$refs.subImgUpload.validate()
        let attributeList = this.$refs.attributeList.validate()
        if (spu && mainImgUpload && subImgUpload && attributeList) {
          this.spuLoading = true;
          this.$store.commit('product/CLEAR_ALL_INFO')// 清空vuex中的allInfo

          console.log("vuex中的spu",this.spu)
          this.$refs.mainImgUpload.submitUpload()// 将主图信息加入vuex
          this.$refs.subImgUpload.submitUpload()// 将副图信息加入vuex

          let spu = {key: "spuJson",value: JSON.stringify(this.spu)}
          this.$store.commit('product/SET_ALL_INFO',spu)// 将spu信息加入vuex

          uploadProduct(this.allInfo,this.updateProgress).then(response => {
            console.log(response)
            if (response.state === true) {
              console.log("uploadProduct");
              this.$notify.success({title: '成功',message: 'spu信息正确，锁定信息！', duration: 1500});
            } else {
              this.$notify.warning({ title: '失败', message: response.message, duration: 1500 });
            }
            this.spuLoading = false;
          })
        }

      },
      resetForm() {
        this.$store.commit('product/reset')// 重置
        /*        console.log(this.$refs.spu)
                console.log(this.$refs.spu.$refs.mainImgUpload)
                console.log(this.$refs.spu.$refs.subImgUpload)*/
        this.$refs.spu.$refs.mainImgUpload.resetForm()
        this.$refs.spu.$refs.subImgUpload.resetForm()
        this.progressPercent = 0;
      },
    },
    computed: {
      ...mapGetters(['disabled','allInfo']),//数组写法

      spu:{// 实时更新vuex中spu
        get(){
          return this.$store.getters.spu
        },
        set(value){
          console.log("set")
          this.$store.commit('product/SET_SPU',value)
        }
      },
    },
    filters: {
    },
    beforeMount (){//初始化数据
      console.log(this.spuRules)
    },
    mounted(){
    },
  }
</script>

<style scoped>

  .info{
    color: #909399;
    font-size: 12px;
    line-height: 1;
    margin-left: 5px;
  }

  .el-input,.el-textarea{
    width: 70%;
  }

  .clearfix{
    display: flex;
    align-items: center;
  }
  .text {
    font-size: 14px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
</style>
